<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-shadow</title>
     <style>
         body{
             text-align: center;
         }
         .content{
            padding: 20px;
         }

         .content img {
              width: 300px;
              border-radius: 100%;
              box-shadow:
               0 0 12px 10px red,
               0 0 14px 12px blue, 
               0 0 16px 14px green
               ;
         }
     </style>
</head>
<body>
     <h1>设计叠加阴影特效</h1>
     <div class="content">
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRf-YVyVDhF_9GOs51Vh4Tl2j1fvzMGAlhbBU7jTYVdXVoU_4m9" alt="">
     </div>
</body>
</html>